<template>
	<div class="flex">
		<div class="pic_box">
			<div class="Mask"></div>
			<img :src="getImages(bg)" alt="" />
			<h1 class="van-ellipsis">{{ title }}</h1>
			<p class="van-multi-ellipsis--l3">{{ des }}</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FoodDetailInfoTitle',
	props: {
		title: {
			type: String,
			default: '没有获取到菜单名称',
		},
		des: {
			type: String,
			default: '',
		},
		bg: {
			type: String,
			default:
				'https://images.weserv.nl/?url=https://i2.chuimg.com/d0c5656a870d4c63b48d16909162860a_1080w_1072h.jpg?imageView2/2/w/660/interlace/1/q/90',
		},
	},
};
</script>

<style scoped>
.flex {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 200px;
	padding: 10px 20px 0px 20px;
	background-color: #fff;
}
.pic_box {
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.pic_box .Mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.pic_box img {
	width: 100%;
	opacity: 0.7;
}
.pic_box h1 {
	width: 75%;
	font-size: 24px;
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
}

.pic_box p {
	width: 75%;
	font-size: 14px;
	position: absolute;
	top: 50px;
	left: 10px;
	color: #fff;
}

.flex .close_item {
	position: absolute;
	right: 30px;
	top: 25px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	/* 阴影需要调整 */
	box-shadow: 0px 5px 40px rgba(26, 77, 160, 0.26), inset 1px 1px 3px rgba(255, 255, 255, 0.95);
}
.flex .close_item i {
	font-size: 40px;
	background-color: #fff;
	border-radius: 50%;
}
</style>
